<template>
	<view class="content">

	    <view class="cu-card case">
	        <view class="cu-item shadow" style="background-color:  #DEB887;">
	    		<view class=" padding-xs flex align-center">
	    			<view class="flex-sub text-center">
	    				<view class="">
	    					<text class=" text-red" style="font-size: 100upx;">{{ data.length }}</text>
	    				</view>
	    				<view class="text-xl text-white text-bold">打卡天数</view>
	    			</view>
	    		</view>
	    	</view>
	    </view>	
		

		<view v-if="isShow">
			<imtCalendar :selected="data" @ClickDate="clickDate"></imtCalendar>
		</view>
			
		<view v-if="!isShow">
			<view class="cu-card">
				<view class="cu-item shadow" style="background-color:  #DEB887;">
					<view class="padding-xl flex align-center">
						<view class="flex-sub text-center">
							<view class="text-xl text-white text-bold">你还未开始打卡，行动起来吧</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import imtCalendar from '../../../component/imtCalendar.vue';
import moment from 'moment';
moment.locale('zh-cn');
export default {
	components: {
		imtCalendar
	},
	data() {
		return {
			data:[],
			isShow:true//true时页面显示为0天的状态，false显示不为零的状态
		};
	},
	onLoad() {
		//this.getcalendar();
		
	},
	created() {
		this.getcalendar();
	},
	mounted() {
		
	},
	methods: {
		getcalendar() {
			var dataLoad=[]; 
			this.request({
				url: this.apiServer+'/task/findMyDailyTaskByUId?limit=10000&skip=0&uId='+uni.getStorageSync("user").id
			}).then(res => {
				console.log(res);
				if(res.msg == "操作成功!")
				{
					res.data.forEach((item, index) => {
					dataLoad.push(moment(item.createTime).format('YYYY-MM-DD').toString());
					//this.data[index]=moment(item.createTime).format('YYYY-MM-DD');
			});	
			    this.data=dataLoad.reverse();
				//console.log(this.data);
				}else{
					this.isShow=false;
				}

			});
		},
		clickDate(e) {
			//console.log("时间"+e[0]+"-"+e[1]+"-"+e[2])
			//console.log(e)
			uni.navigateTo({
				url: '../mineCalendar/index?Datetime=' + e 
			});
		}
	}
};
</script>

<style>
page {
	background: #f2f2f2;
}
.content {
	padding-top: 30upx;
	margin-bottom: 20px;
}
</style>
